<template>
    <div class="home-box">
        <!-- 首页分类列表 start -->
        <div v-for="(type, index) in types" :key="index">
            <div class="list-name">
                <span>{{ type.typeName }}</span>
                <router-link class="list-more" tag="span" :to=" '/films?typeId='+type.typeId +'&title='+type.typeName">更多 ></router-link> 
            </div>
            <FilmList class="list-content" :list="type.list"/>
        </div>
        <!-- 首页分类列表 end -->
    </div>
</template>
<script>
import FilmList from "../components/FilmList.vue";

export default {
    components: {
        FilmList
    },
    data(){
        return {
            types:[],
        }
    },
    methods: {
        loadHomeData(){
            this.$api.loadTypes()
                .then((data)=>{
                    this.types = data;
                })
                .then(()=>{
                    let promiseArr = [];
                    for (let i = 0; i < this.types.length; i++){
                        let typeId = this.types[i].typeId;
                        // 获取数据过程中， 一个请求的请求参数依赖另外一个请求的返回结果
                        let temp = this.$api.loadFilms({
                            typeId:typeId
                        });
                        promiseArr.push(temp);
                    }
                    // console.log(promiseArr);
                    // 将promise 对象合并成一个promise 对象
                    //  同时进行功能执行，并将执行后的结果 以数组方法对应 promise进行封装
                    //  并完成返回
                    return Promise.all(promiseArr);
                })
                .then((arr)=>{
                    // console.log(arr)
                    for (let i = 0; i < arr.length ; i++){
                        this.$set(this.types[i],"list", arr[i]);
                    }
                })
                .catch(this.$error);
        }
            
    },
    mounted(){
       this.loadHomeData();
    }

};
</script>
<style lang="less" scope>
// 首页样式
.home-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.list-content{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after{
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}
</style>